<!--
 * @Descripttion: 物业管理员
 * @version: 
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-05-23 17:22:25
--> 
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="房屋名：">
            <el-input class="normal" placeholder="请输入房屋名" @keydown.enter.native="handleQuery('a')" clearable v-model="filters.corpName"></el-input>
          </el-form-item>
          <el-form-item label="业主姓名：">
            <el-input class="normal" placeholder="请输入业主姓名" @keydown.enter.native="handleQuery('a')" clearable v-model="filters.username"></el-input>
          </el-form-item>
          <el-form-item label="电话：">
            <el-input class="normal" placeholder="请输入电话号码" @keydown.enter.native="handleQuery('a')" clearable v-model="filters.phone"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery('a')">查询</el-button>
            <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          border
          stripe
          style="width: 100%;margin-bottom: 20px;"
          v-loading="loading"
          element-loading-text="加载中..."
          ref="filterTable"
          :data="oneHouseList"

        >
          <el-table-column prop="address" label="房屋名" align="center"></el-table-column>
          <el-table-column prop="yezhuname" label="业主姓名" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.yezhuname">{{ scope.row.yezhuname }}</span>
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" align="center" width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.phone">{{ scope.row.phone }}</span>
              <span v-else>未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="fangtype" label="房屋类型" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.fangtype == 1">自住</span>
              <span v-if="scope.row.fangtype == 2">出租</span>
              <span v-if="scope.row.fangtype == 3">商铺</span>
              <span v-if="scope.row.fangtype == 4">闲置</span>
              <span v-if="scope.row.fangtype == 5">营业场所</span>
              <span v-if="scope.row.fangtype == 6">住房商用</span>
              <span v-if="scope.row.fangtype == 0">未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="fangmark" label="房屋标记" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.fangmark">{{ scope.row.fangmark }}</span>
              <span v-if="!scope.row.fangmark">未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="renmark" label="人员标记" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.renmark">{{ scope.row.fangmark }}</span>
              <span v-if="!scope.row.renmark">未设置</span>
            </template>
          </el-table-column>
          <el-table-column prop="kongxian" label="是否闲置" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.kongxian == 1">是</span>
              <span v-if="scope.row.kongxian == 2">否</span>
              <span v-if="!scope.row.kongxian">未设置</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="family(scope.$index, scope.row)">家庭成员</el-button>
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 家庭成员弹框  / 编辑 -->
        <el-dialog title="家庭成员" :visible.sync="dialogTableVisible">

        </el-dialog>
      </div>

      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float:right;"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:true,
      // 弹框
      dialogTableVisible: false,
      // 默认图片
      imgs: require("@/assets/imgs/houtai/wutu.png"),

      // 家庭成员
      tableData: [
        {
          id: "12987122",
          name: "张三",
          category: "夫妻",
          desc: "2020-2023",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987123",
          name: "李四",
          category: "子女",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          id: "12987125",
          name: "王二麻子",
          category: "父母",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
      ],
      // 查询返回
      asideShow: false,
      unitShow: false,
      pageResult: [],
      filters: {
        corpId: 0,
        corpName: "",
        username: "",
        iphone: ""
      },
      pageRequest: {
        page: 1,
        pageSize: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      exportUrl: this.global.baseUrl + "/self_test_stat/export",
      exportLoading: false,
      // 一户一档列表
      oneHouseList: [],
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      dialogVisible: false,
      // 新增编辑界面数据
      dataForm: {
        address: ""
      }
    };
  },
  mounted() {
    this.getList(this.pageRequest.page, this.pageRequest.pageSize);
  },
  methods: {
    // 获取一户一档列表
    //获取房间列表
    getList(page, limit, address, name) {
      this.$http
        .post(this.$ports.personnel.oneHousehold, {
          PCID: ["5101"],
          limit: limit,
          page: page,
          HID: address,
          floorlimit: "",
          householdslimit: ""
          // _csrf: this.$store.state.token
        })
        .then(res => {
          if (res.code == 0) {
            this.loading = false;
            this.oneHouseList = res.data;
            this.totalSize = res.count;
            // this.loading = false;
            // 房号
            this.oneHouseList = res.data.map((item, index) => {
              item.address = item.HID.split("-");
              if (item.address[2]) {
                item.address[2] = item.address[2] + "栋";
              } else {
                item.address[2] = "";
              }
              if (item.address[3]) {
                item.address[3] = item.address[3] + "单元";
              } else {
                item.address[3] = "";
              }
              if (item.address[4]) {
                item.address[4] = item.address[4] + "楼";
              } else {
                item.address[4] = "";
              }
              if (item.address[5]) {
                item.address[5] = item.address[5] + "号";
              } else {
                item.address[5] = "";
              }

              item.address =
                // this.$store.state.name +
                item.address[2] +
                item.address[3] +
                item.address[4] +
                item.address[5];

              return {
                HID: item.HID,
                address: item.address,
                yezhuname:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.yezhuname
                    : "",
                phone:
                  item.houseInfo.length > 0 ? item.houseInfo[0].info.phone : "",
                fangtype:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.fangtype
                    : "",
                fangmark:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.fangmark
                    : "",
                renmark:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.renmark
                    : "",
                hetong:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.hetong
                    : "",
                fangCard:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.fangCard
                    : "",
                kongxian:
                  item.houseInfo.length > 0
                    ? item.houseInfo[0].info.kongxian
                    : ""
              };
              // this.address = item.HID;
            });
          }else{
            this.loading = false;
          }
          if (res.code == 0 && res.data.length == 0) {
            this.$message({
              message: "没有此数据",
              type: "info"
            });
          }

          console.log(this.oneHouseList);
        });
    },
    // 家庭成员
    family(index, row) {
      this.dialogTableVisible = true;
    },
    // 查询一户
    handleQuery() {
      var filName = this.filters.username;
      var ld = filName.replace("栋", "-");
      var dy = ld.replace("单元", "-");
      var lc = dy.replace("楼", "-");
      var hh = "510100-001-" + lc.replace("号", "");
      this.getList("", "", hh);
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.getList(this.pageRequest.page, this.pageRequest.pageSize);
    },
    // 新增
    handleAdd() {
      this.dialogVisible = true;
      this.operation = true;
    },
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.operation = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>